<style scoped>
/*通过设定或者继承父级以下变量修改样式
  --list-slot-color-round-bg: var(--color-bg-0);
  --list-slot-color-font: var(--color-bg-re);
  --list-slot-color-hr: var(--color-bg-1);
  --list-slot-padding: 0.04rem;
  --list-slot-radius: 0.08rem;
*/
.list-slot{background-color: var(--color-bg);}
.list-slot>.inner{overflow: hidden;color: var(--list-slot-color-font, var(--color-bg-re));padding: var(--list-slot-padding, 0.04rem);}
.list-slot h3{padding: 16px 8px 0;justify-content: space-between;overflow: hidden;}
.list-slot h3>.href{font-size: 0.7em;opacity: 0.5;}
.list-slot ul{display: flex;flex-wrap: wrap;justify-content: flex-start;align-items: stretch;}
.list-slot ul>li{width: 100%;padding: var(--list-slot-padding, 0.04rem);box-sizing: border-box;justify-content: center;align-items: flex-start;overflow: hidden;}
.list-slot ul>li>.list-row{width: 100%;height: 100%;position: relative;}

/* cols数量不同的区分 */
.list-slot[cols="1"] ul>li{border-bottom: 1px solid var(--list-slot-color-hr, var(--color-bg-1));}
.list-slot[cols="1"] ul>li:last-child{border-bottom: none;}
.list-slot[cols="2"] ul>li{width: 50%;}
.list-slot[cols="3"] ul>li{width: 33.3%;}
.list-slot[cols="4"] ul>li{width: 25%;}
.list-slot[cols="5"] ul>li{width: 20%;}

/* round、round_list、round_row 模式 */
.list-slot[mode="round"]{padding: var(--list-slot-padding, 0.04rem);}
.list-slot[mode="round"]>.inner{border-radius: var(--list-slot-radius, 0.08rem);background-color: var(--list-slot-color-round-bg, var(--color-bg-0));}

.list-slot[mode="round_list"] ul{background-color: var(--list-slot-color-round-bg, var(--color-bg-0));border-radius: var(--list-slot-radius, 0.08rem);}

.list-slot[mode="round_row"] ul>li>.list-row{background-color: var(--list-slot-color-round-bg, var(--color-bg-0));border-radius: var(--list-slot-radius, 0.08rem);overflow: hidden;}
.list-slot[mode="round_row"][cols="1"] ul>li{border-bottom: none;}

</style>
<template>
  <div class="list-slot" :mode="value.mode" :cols="value.cols">
    <div class="inner">
      <h3 v-if="value.title || value.link_href" class="flex" @click="click">
        <span class="max text-ellipsis">{{value.title}}</span>
        <span v-if="value.link_href" class="href">{{value.link_text}}<van-icon name="arrow"/></span>
      </h3>
      <ul class="flex">
        <template v-for="(row,i) in list">
          <template v-if="$slots.group && group_key && group_map[i]">
            <slot name="group" v-bind="group_map[i]"></slot>
          </template>
          <li>
            <div class="list-row">
              <slot name="default" :row="row" :index="i"/>
            </div>
          </li>
        </template>
      </ul>
    </div>
  </div>
</template>

<script>

import {to_string} from "@/js/s94_tool.js";
import {href_handle} from "@/vue_plugin/router_auto.js";

/**
 * @prop {*}
 */
export default {
  _title_: '列表',
  _tip_: '列表容器，循环渲染子组件，每一项作为子组件的$info',
  _css_var_: {
    '--list-slot-color-round-bg': 'var(--color-bg-0)',
    '--list-slot-color-font'    : 'var(--color-bg-re)',
    '--list-slot-color-hr'      : 'var(--color-bg-1)',
    '--list-slot-padding'       : '0.04rem',
    '--list-slot-radius'        : '0.08rem',
  },
  _head_img_: '',
  _group_: '容器组件',
  components: {},
  props:{
    list: {
      type: Array,
      default: [],
      _label_: '列表数据',
      _tip_: '',
      _required_: true,
      _input_type_: 'SelectList',
    },
    title: {
      type: String,
      _label_: '列表标题',
      _tip_: '显示在列表左上角的标题，如果为空，表示不显示',
    },
    link_href: {
      type: String,
      _label_: '跳转链接',
      _tip_: '标题点击后的跳转地址，为空不会显示右侧箭头和链接文本',
    },
    link_text: {
      type: String,
      _label_: '链接文本',
      _tip_: '标题右侧的链接文本',
    },
    cols: {
      type: [String, Number],
      _label_: '分栏数量',
      _tip_: '项目列表的分栏数量，1-5，默认为：1',
    },
    mode: {
      type: String,
      _label_: '列表模式',
      _tip_: 'round、round_list、round_row、其他。分别表示整体圆角、列表圆角、每一项圆角、无圆角',
    },
    group_key: {
      type: String,
      _label_: '分组键值',
      _tip_: '用于分组的键值，遇到对应值不同的项目会多生成一个group插槽内容',
    },
  },
  data(){
    return {}
  },
  methods:{
    click(){
      if (!this.value.link_href) return;
      href_handle(this.value.link_href);
    },
  },
  computed:{
    value(){
      let cols = Number(this.cols) || 1;
      cols = Math.min(5, cols);
      cols = Math.max(1, cols);
      return {
        title: to_string(this.title),
        link_href: to_string(this.link_href),
        link_text: to_string(this.link_text),
        cols: cols,
        mode: to_string(this.mode),
      }
    },
    group_map(){
      let res = {}
      if (!this.group_key || !this.list) return res
      let group_row = {}
      this.list.forEach((row,i)=>{
        let group_value_row = row[this.group_key];
        // 前一组结束，下一组开始
        if (!group_row || group_row.group_value !== group_value_row){
          if (group_row) {
            res[group_row.index_start] = group_row;
          }
          group_row = {
            index_start: i,
            index_end: i,
            row_start: row,
            row_end: row,
            group_value: group_value_row,
            group_list: [row],
          }
        } else {
          group_row.index_end = i;
          group_row.row_end = row;
          group_row.group_list.push(row);
        }
        if (group_row) {
          res[group_row.index_start] = group_row;
        }
      })
      return res;
    }
  },
  mounted(){
  }
}
</script>